<template>
    <el-autocomplete
        popper-class="my-autocomplete"
        v-model="state"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        @select="handleSelect"
        :clearable="needClear ? true : false"
        :class="isResultList ? 'resultInput': 'searchInput'">
        <template slot="append">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </template>
        <template slot-scope="{ item }">
            <template>
                <el-link :underline="false">
                    <span class="name">{{ item }}</span>
                </el-link>
            </template>
        </template>
    </el-autocomplete>
</template>
<script>
import { mapMutations,mapState } from 'vuex';
export default {
    name:'SearchInput',
    props:{
        defaultValue:{
            type:String,
            value:''
        },
        isResultList:{
            type:Boolean,
            value:false
        },
        needClear:{
            type:Boolean,
            value:false
        }
    },
    data:()=>{
        return {
            restaurants:[],  // 搜索下拉框列表历史/模糊查询
            state:'',
            select:null,   // 选中搜索项
            historyListLastId:'DELETE',  // 历史删除标识
            historyListType:'HISTORY',   // 历史项标识
            timeout:null,     // 定时器
            oldValue:null
        }
    },
     computed:{
        ...mapState({
            selectItem:state => state.front.selectItem
        })
    },
    created(){
        // console.log('defaultValue',this.defaultValue);
        this.state = this.defaultValue;
        if(this.state){
            this.select = this.selectItem;
        }
    },
    methods:{
        ...mapMutations({
            setSearchValue:'front/setSearchValue',
        }),
        getKeywordList(value){
            // 关键字模糊查询接口
            return this.$axios.post(this.$api.front.getKeywordList,{eventTitle:value}).then(res=>{
                let list = res.data.data;
                if(list && list.length){
                this.restaurants = list;
                }
            })
        },
        // 查询事件监听
        querySearch(value,cb){
            // console.log('querySearch','state',this.state,'value',value,'oldValue',this.oldValue)
            if(this.oldValue === value){
                cb(this.restaurants)
                return;
            }
            this.restaurants = [];
            // console.log('querySearch',value,typeof value);
            if(!value || !value.length){
                // this.select = null;
                cb(this.restaurants);
                // // 请求历史记录接口
                // clearTimeout(this.timeout);
                // this.timeout = setTimeout(()=>{
                //     this.getHistoryList().then(()=>{
                //         this.oldValue = value;
                //         console.log('QI',value)
                //         cb(this.restaurants);
                //     }).catch(err=>{
                //         cb(this.restaurants);
                //     })
                // },300)
                
            }else{
                // 请求当前查询字段列表接口
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    this.getKeywordList(value).then(()=>{
                        this.oldValue = value;
                        cb(this.restaurants);
                    }).catch(err=>{
                        cb(this.restaurants);
                    })}, 300);
            }
        },
        handleSearch(){
            // 页面路由跳转
            if(this.state){
                this.setSearchValue(this.state);
                this.$emit('handleSearch');
            }
            
        },
        handleSelect(value){
            this.select = value;
            this.state = value;
        },
    },
    watch:{}
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
.searchInput /deep/ .el-input{
    width:654px;
}
.resultInput /deep/ .el-input{
    width:600px;
}
button.el-button{
    background-color:$--color-primary !important;
    color:#fff!important;
    line-height: 1.2;
}
.el-scrollbar{
    li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .del{
            font-size:14px;
        }
        .del-total{
            text-align: right;
            width:100%;
        }
        }
}
</style>